<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="css/swiper.css" />
		<link rel="stylesheet" href="css/mint.css">
	</head>
		<script src="js/serverUrl.js"></script>
		<script src="js/vue.js"></script>
		<script src="js/mint.js"></script>
		<script src="js/moment.js"></script>
		<style type="text/css">
			.teacherContainer{
				display: grid;
				grid-template-columns: 1fr 1fr;
				place-items: center;
			}
			
			.teacherItem{
				display: flex;
				width: 45vw;
				height: 62vw;
				box-shadow: 2px 2px 3px #888888;
				margin-top: 15px;
				background: white;
				border-radius: 5px;
				align-self: center;
				flex-direction: column;
                padding-bottom:15px
			}
			
			.teacherImage{
				width: 45vw;
				height: 30vw;
			}
			.teacherName{
				font-size: 16px;
				font-weight: bold;
				margin-left: 10px;
				margin-top: 8px;
			}
			.teacherInfoImage{
				height: 25px;
				width: 25px;
				margin-right: 5px;
				}
			.teacherInfo{
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin-left: 10px;
				margin-right: 10px;
				margin-top: 8px;
				height: 25px;
				display: flex;
				align-items: center;
				font-size: 12px;
				color: gray;
			}
			
			.teacherMajor{
				text-overflow: ellipsis ;
				display: -webkit-box ; 
				-webkit-box-orient: vertical; 
				-webkit-line-clamp: 2; 
				overflow: hidden; 
				margin-left: 10px;
				margin-right: 10px;
				margin-top: 18px;
				font-size: 12px;
				color: gray;	
				line-height: 25px;
			}
		</style>
	<body>
		<div id="app">
			<div class="teacherContainer">
				<div v-for="teacher in teacherList" class="teacherItem" v-on:click="toDetail(teacher)">
					<img class="teacherImage" :src="serverUrl+teacher.teacherPhotoUrl" />
					<div class="teacherName">{{teacher.teacherName}}</div>
					<div class="teacherInfo"><img src="img/jszg.png"  class="teacherInfoImage"/>{{teacher.brief}}</div>
					<div class="teacherMajor"><img src="img/zjkc.png" s class="teacherInfoImage"/>{{teacher.teacherMajor}}</div>
				</div>		
			</div>
		</div>
	</body>
	
	<script type="text/javascript">
		var app = new Vue({
		  el: '#app',
		  data:{
			  teacherList:[
		      ],
		  },
		  created() {
              window.getTeacherList = this.getTeacherList
              window.clear = this.clear
		  },
		  methods:{
			  getTeacherList (teacherList){
                  this.teacherList = teacherList
			  },
              clear(){
                 this.teacherList  = []
              },
              toDetail (teacher){
                  let params = {
                      teacher:JSON.stringify(teacher)
                  }
                  WebViewJavascriptBridge.callHandler('toTeacherDetail',params,function(response) {
                         
                  });
              }
		  }
		})		
		</script>
</html>
